<template>
  <div id="app">
    <div class="cont">
      <div class="top">
        <van-nav-bar
          title="宠物话题"
          right-text="发布话题"
          left-arrow
          :border="false"
          @click-left="$router.go(-1)"
          @click-right="onClickRight" />
      </div>
      <div v-for="(item, index) in stitle" :key="item.tid">
        <RouterLink :to="`/moredetail/${item.tid}`">
          <Pettopic
            :title="stitle[index].title"
            :name="stitle[index].name"
            :describe="stitle[index].describe">
          </Pettopic>
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<script>
import Pettopic from '@/components/Pettopics.vue'
import { getPT } from '@/api/home'
export default {
  data() {
    return {
      stitle: [],
    }
  },
  methods: {
    // 获取宠物信息
    async getPet() {
      const data = await getPT()
      this.title = data.data.message
      for (let i = 0; i < 3; i++) {
        this.stitle = data.data.message
      }
      console.log(this.stitle)
      console.log(this.title)
    },

    onClickRight() {
      this.$router.push('/moreAdd')
    },
  },
  components: {
    Pettopic,
  },
  beforeMount() {
    //发起请求，拿到宠物话题数据
    this.getPet()
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}
::v-deep .van-nav-bar .van-icon {
  color: black;
}
::v-deep .van-nav-bar__text {
  display: block;
  background-color: #ffcc1f;
  width: 70px;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  color: white;
  font-weight: 600;
}
.cont {
  height: 610px;
  overflow: scroll;
}
</style>
